<template>
  <div
    class="box"
    style="
    z-index: 100;
    position: absolute;
    left: 25%;
    top: 620px;
"
    :style="{width:boxWidth+'px',display:boxdisplay}"
  >
    <div id="progressTime_control" @click="startClick()" :class="tempclass"></div>
    <div class="progressTime" id="progressTime" style="z-index: 9; display: block;">
      <div>
        <p
          id="startTime"
          style=" float:left;margin-left:33px;opacity: 0;display: none;"
        >2017/07/29 0:00:00</p>
        <p
          id="endTime"
          style=" float:right;margin-right:33px;opacity: 0;display: none;"
        >2017/08/10 0:00:00</p>
      </div>
      <div class="time_slot" v-for="(slide, index) in dataList" :key="index">
        <p>{{slide.simpleTime}}</p>
      </div>
      <div id="progressTime_concent">
        <div id="scrollBarBox">
          <div id="scrollBar">
            <div id="scroll_Track" :style="track_style"></div>
            <div id="scroll_Thumb" :style="thumb_style">{{currentTime}}</div>
          </div>
        </div>
        <div class="timecode" style="display: none; left: 69.5px;">04:00</div>
        <div style="width:90%; margin-left: auto;margin-right: auto;">
          <div style="width:300px;float:right;margin-right:-110px;margin-top:-8px">
            <p id="TimeSpeed" style="float:left;margin-right:40px;display:none">×1</p>
            <p style="float:right" id="scrollBarTxt"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './timebar.css';
var _ = require('lodash');
import * as mapOper from '../../scripts/mapOper.js';
export default {
  name: 'TimeBar',
  // props: {
  //   swiperSlides: {
  //     type: Array,
  //     default: () => []
  //   },
  //   swiperOption: {
  //     type: Object,
  //     default: () => {}
  //   }
  // },
  data() {
    return {
      smap: null,
      dataList: null,
      mProgressTimer: null,
      currentTime: '开始',
      index: 0, //进度
      maxValue: 0,
      //进度条宽度
      boxWidth: 0,
      //进度条显示
      boxdisplay: 'none',
      isStart: false,
      tempclass: 'progressTimePause',
      track_style: {
        width: '0px'
      },
      thumb_style: {
        marginLeft: '0px'
      }
    };
  },
  // watch: {
  //   swiperOption() {
  //     this.initOption = this.swiperOption;
  //   }
  // },
  methods: {
    init(map, data) {
      this.smap = map;
      _.forEach(data, function(obj) {
        var tempStrs = obj.currentTime.split(' ');
        var dateStrs = tempStrs[0].split('-');
        var month = parseInt(dateStrs[1], 10) - 1;
        var day = parseInt(dateStrs[2], 10);
        var timeStrs = tempStrs[1].split(':');
        var hour = parseInt(timeStrs[0], 10);
        obj.simpleTime = month + '月' + day + '日' + hour + '时';
      });
      this.dataList = _.sortBy(data, ['simpleTime']);
      this.maxValue = data.length;
      this.boxWidth = 130 * this.maxValue + 40;
      this.boxdisplay = 'block';
      this.startClick();
    },
    startClick() {
      let that = this;
      that.isStart = !that.isStart;
      console.log(this.smap);
      if (that.isStart) {
        that.tempclass = 'progressTimePause';
        that.mProgressTimer = window.setInterval(function() {
          if (that.index < that.maxValue) {
            that.index += 1;
            that.SetProcessTime(that.index);
            that.currentTime = that.dataList[that.index - 1].simpleTime;
            //加载图层
            let style = mapOper.getGeoJsonStyle('pm25style');
            let jsonData = {
              type: 'FeatureCollection',
              name: 'sydpoint',
              crs: {
                type: 'name',
                properties: { name: '' }
              },
              features: that.dataList[that.index - 1].featrurList
            };
            let param = {
              map: that.smap,
              jsonData: jsonData,
              zIndex: 17,
              style: style,
              styleFunc: function(feature) {
                let type = feature.get('hvalue');
                if (type < 35) {
                  return style['lv1'];
                } else if (type <= 35 && type < 75) {
                  return style['lv2'];
                } else if (type <= 75 && type < 115) {
                  return style['lv3'];
                } else if (type <= 115 && type < 150) {
                  return style['lv4'];
                } else if (type <= 150 && type < 250) {
                  return style['lv5'];
                } else if (type <= 250 && type < 500) {
                  return style['lv6'];
                }
              }
            };
            mapOper.loadGeoJsonLayerNew(param);
          } else {
            that.index = 0;
          }
        }, 2000);
      } else {
        that.tempclass = 'progressTimeActive';
        window.clearInterval(that.mProgressTimer);
      }
    },
    SetProcessTime(index) {
      this.track_style.width = (index + (index - 1)) * 65 + 'px';
      this.thumb_style.marginLeft = (index + (index - 1)) * 65 + 'px';
    }
  }
};
</script>